<template>
	<view class="commerce">

		<scroll-view scroll-y="true" @scrolltolower="onReach">
			<view class="type flex_r_between">
				<view class="item" :id="action_type == item.action_type ? 'select' : ''"
					@click="onTab(item.action_type)" v-for="(item,index) in tabList" :key="index">
					{{ item.title }}
				</view>
			</view>

			<view class="content flex_r_between" v-if="action_type == 1">
				<empty v-if="!list.length"></empty>
				<view class="item" v-for="(item , index) in list" :key="index" @click="onSubmit(item)">
					<view class="image">
						<image :src="$util.getAvatar(item.goods_image)" mode="aspectFill"></image>
					</view>
					<view class="name hidden">{{ item.name || '' }}</view>
					<view class="bottom flex_center">
						<text>￥</text>
						<view>{{ item.price || '' }}</view>
					</view>
				</view>
			</view>

			<view class="content flex_r_between" v-if="action_type == 2">
				<empty v-if="!list.length"></empty>
				<view class="item" v-for="(item , index) in list" :key="index" @click="onSubmit(item)">
					<view class="image">
						<image :src="$util.getAvatar(item.image)" mode="aspectFill"></image>
					</view>
					<view class="name hidden">{{ item.title || '' }}</view>
					<view class="bottom flex_center">
						<text>￥</text>
						<view>{{ item.active_price || '' }}</view>
					</view>
				</view>
			</view>


			<view class="content flex_r_between" v-if="action_type == 3">
				<empty v-if="!list.length"></empty>
				<view class="item" v-for="(item , index) in list" :key="index" @click="onSubmit(item)">
					<view class="image">
						<image :src="$util.getAvatar(item.goods_image)" mode="aspectFill"></image>
					</view>
					<view class="name hidden">{{ item.name || '' }}</view>
					<view class="bottom flex_center">
						<text>￥</text>
						<view>{{ item.price || '' }}</view>
					</view>
				</view>
			</view>
		</scroll-view>



	</view>
</template>

<script>
	import empty from '@/compentents/empty/empty.vue';
	export default {
		components: {
			empty,
		},
		props: {
			circle: {
				type: Object
			}
		},
		data() {
			return {
				page: 1,
				total: 0,
				list: [],

				select_index: -1,

				// 带货类型:1=商品,2=找搭子,3=游戏约玩
				action_type: 1,

				// 圈子
				// circle: {},

				tabList: [],
				
				user: {},
				
				store_id: 0,
			}
		},
		methods: {
			onTab(tab) {
				if(this.action_type == tab){
					return ;
				}
				this.action_type = tab;
				if (tab == 1) {
					this.page = 1;
					this.list = [];
					this.getStoreList();
				}

				if (tab == 2) {
					this.page = 1;
					this.list = [];
					this.getLoyouList();
				}

			},

			onSubmit(item) {
				// let pages = getCurrentPages();
				// let nowPage = pages[pages.length - 1];
				// let prevPage = pages[pages.length - 2];
				// prevPage.$vm.selectCommerce(this.action_type, item);
				this.$emit('selectCommerce', {
					action_type: this.action_type,
					action: item
				})
				// this.$util.back();
			},

			getStoreList() {
				this.$get('/store_goods/getGoodsList', {
					page: this.page,
					store_id: this.store_id,
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
				});
			},

			getLoyouList() {
				this.$get('/loyou/getList', {
					page: this.page,
					status: 1
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
				});
			},

			onReach() {
				if (this.total > this.list.length) {

					if (this.action_type == 1) {
						this.page++;
						this.getStoreList();
					}

					if (this.action_type == 2) {
						this.page++;
						this.getLoyouList();
					}

				}
			},

			getInit() {
				// article_link_open 是否开放连接:0=否，1=开放
				// article_link_pub 发布权限:1=允许所有发布，2=仅自己发布
				if(this.user.store_id > 0){
					this.store_id = this.user.store_id;
					this.tabList.push({
						title: '商品',
						action_type: 1
					});
				}else if(this.user.sign_store_id > 0){
					this.store_id = this.user.sign_store_id;
					this.tabList.push({
						title: '商品',
						action_type: 1
					});
				}
				
				this.tabList.push({
					title: '活动',
					action_type: 2
				});
				this.action_type = this.tabList[0].action_type;
				if(this.action_type == 1){
					this.getStoreList();
				}else {
					this.getLoyouList();
				}
			}
		},

		created() {
			this.user = uni.getStorageSync('user');
			this.getInit();
		}

	}
</script>

<style lang="less" scoped>
	.commerce {
		height: 100%;
	}

	scroll-view {
		box-sizing: border-box;
		padding: 24rpx 28rpx;
		height: 100%;
	}

	.type {
		margin-bottom: 20rpx;

		.item {
			width: 336rpx;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #CCCCCC;
			line-height: 68rpx;
			text-align: center;
			border: 2rpx solid #FFF;
		}

		#select {
			border: 2rpx solid #F9C3CD;
			color: #333;
		}
	}

	.content {
		flex-wrap: wrap;

		.item {
			width: 336rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			overflow: hidden;
			padding-bottom: 16rpx;
			margin-bottom: 24rpx;

			.image {
				width: 336rpx;
				height: 336rpx;
				background: #D8D8D8;
				border-radius: 24rpx;
				overflow: hidden;

				image {
					width: 336rpx;
					height: 336rpx;
				}
			}

			.name {
				font-weight: 500;
				font-size: 30rpx;
				color: #131313;
				padding: 0 24rpx;
				margin: 16rpx 0;
			}

			.bottom {
				padding: 0 24rpx;
				font-size: 26rpx;
				color: #666666;
				flex: 1;

				text {
					font-weight: 500;
					font-size: 28rpx;
					color: #FD2A53;
				}

				view {
					font-weight: 600;
					font-size: 36rpx;
					color: #FD2A53;
				}
			}

		}

	}
</style>